<template>
  <div>
    <div class="content">
      <div class="logo">
        <div>
          <div style=" display: flex;margin-left: 7px; align-items: center">
            <img src="@/assets/imgs/qihuan.png" alt="" style="width: 40px">
            <div
                style="font-weight: bold;color:#000000;padding-bottom: 4px;line-height: 32px;font-size: 26px; margin-left: 5px;font-family: 方正舒体">
              综合信息平台
            </div>
          </div>
        </div>
      </div>
      <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
        <ul class="links" router
            style="border: none"
            :default-active="$route.path"
            :default-openeds="['/homeFront']">
          <li><a href="/homeFront"><img class="icon-all" src="/public/front/shouye.svg">首页</a></li>
          <li>
            <a href="#" class="desktop-link"><img class="icon-all" src="/public/front/xiaoxitongzhi.svg">信息浏览</a>
            <ul>
              <li><a href=""><img class="icon-all" src="/public/front/xinxi.svg">开发中</a></li>
              <li><a href="/ArticleFront"><img class="icon-all" src="/public/front/jiaoliu.svg">交流墙</a></li>
            </ul>
          </li>
          <li>
            <a href="#" class="desktop-link"><img class="icon-all" src="/public/front/kecheng.svg">课程管理</a>
            <ul>
              <li><a href="/courseFront"><img class="icon-all" src="/public/front/xinxi.svg">课程信息</a></li>
              <li><a href="/selectCourseFront"><img class="icon-all" src="/public/front/bofangjilu.svg">选课记录</a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" class="desktop-link" v-if="user.role==='ADMIN'">学生管理</a>
            <ul>
              <li><a href="/studentIfoFront/">学生信息</a></li>
            </ul>
          </li>
          <li><a href="/personIfoFront" v-if="user.role==='STUDENT'"><img class="icon-all"
                                                                          src="/public/front/gerentouxiang_o.svg">个人资料</a>
          </li>
          <li><a href="/login" @click="logout"><img class="icon-all" src="/public/front/tuichu.svg">退出</a></li>
        </ul>
        <img src="@/assets/imgs/adine.png" alt=""
             style="width: 40px; height: 40px">
        <span style="margin-left: 5px;color: black" v-if="user.role==='STUDENT'"><span
            style="font-weight: bolder;font-family: 黑体;font-size: 20px">学生：</span>{{user.name }}</span>
      </div>
    </div>
    <div class="all-bar">
      <div class="content-second">
        <router-view/>
      </div>
    </div>
  </div>
</template>


<script setup>
import router from "@/router";

const user = JSON.parse(localStorage.getItem("student-user"));
import {useRoute} from 'vue-router'

const $route = useRoute()
console.log($route.path)

const logout = () => {
  localStorage.removeItem('student-user')

}
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #dcede9 !important;
}

.el-menu-item:hover {
  color: #5e6469;
}

.all-bar {
  display: flex;
  height: calc(100vh - 60px);

}

.content-second {
  flex: 1;
  width: 0;
  overflow: scroll;
  padding-top: 50px;
  background-image: url('./src/assets/imgs/color.png');
  background-size: cover;
  display: block;
}
.content-second::before {
  content: ''; /* 必须设置内容为空 */
  position: absolute; /* 绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: inherit; /* 继承父元素的背景颜色 */
  filter: blur(30px); /* 设置模糊程度，根据需求调整 */
  z-index: -1; /* 将 ::before 伪元素放置在底层 */
}
.content {
  z-index: 0;
  background-image: url('./src/assets/imgs/ceng2.png');
  background-color: rgba(0, 0, 0, 0);
  box-sizing: content-box;
  width: 100%;
  min-width: 1200px;
  border-bottom: 1px solid rgb(147, 147, 164);
  box-shadow: 0 0 4px #646464;
  display: flex;
  align-items: center;
  height: 60px;
  justify-content: space-between;
}

.content .links {
  margin-right: 80px;
  display: flex;
  font-size: 30px;
  line-height: 30px;
  font-family: '仿宋', bold, sans-serif;

}

.content .logo a {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}

.content .links li {
  list-style: none;
  line-height: 70px;
}

.content .links li a,
.content .links li label {
  color: #000000;
  font-size: 18px;
  font-weight: 500;
  padding: 9px 17px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.content .links li label {
  display: none;
}

.content .links li a:hover,
.content .links li label:hover {
  background: #ececec;
}

.wrapper .search-icon,
.wrapper .menu-icon {
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 70px;
  width: 70px;
  text-align: center;
}

.wrapper .menu-icon {
  display: none;
}


.wrapper .search-box {
  position: absolute;
  height: 100%;

  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: all 1s ease;
}

.wrapper #show-search:checked ~ .search-box {
  opacity: 1;
  pointer-events: auto;
}

.search-box input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 17px;
  color: #fff;
  background: #d2d2d2;
  padding: 0 100px 0 15px;
}

.search-box input::placeholder {
  color: #f2f2f2;
}

.search-box .go-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 60px;
  width: 70px;
  background: #171c24;
  border: none;
  outline: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

.wrapper input[type="checkbox"] {
  display: none;
}

/* Dropdown Menu code start */
.content .links ul {
  position: absolute;
  background: #cecece;
  top: 80px;
  opacity: 0;
  visibility: hidden;
  padding: 0;
  width: 130px;
}

.content .links li:hover > ul {
  top:61px;
  background-color: rgba(255, 255, 255, 0.54);
  backdrop-filter: blur(8px);
  opacity: 1;
  z-index: 1;
  border-radius: 10px;
  visibility: visible;
  transition: all 0.3s ease;
}

.content .links ul li a {
  text-align: center;
  display: block;
  width: 100%;
  font-size: 16px;
  line-height: 30px;
  border-radius: 10px !important;
}

.content .links ul ul {
  position: absolute;
  top: 0;
  right: calc(-100% + 8px);
}

.content .links ul li {
  z-index: 1;
  position: relative;
}

.content .links ul li:hover ul {
  top: 0;
}


</style>